//登录验证吗
<template>
<div style="width:100%;height:100%;background:#333">
  <div class="login-phone-code">
      <b-container>
          <b-row class="l-wapper" style="height: 645px;width: 450px;margin: 0 auto;">
              <b-col  class="wappere" style="margin-top: 90px;">
                  <div style="">
                <div class="login-title">
                    <p>{{$t('d_dlzh')}}</p>
                </div>

                <div class="form-tab" style="height: 71px;">
                    <b-input-group>
                        <!-- <b-input-group-addon class="input-icon">
                            <img src="../../assets/img/icon-phonecode.png" alt="">
                        </b-input-group-addon> -->
                        <b-form-input v-model="mgsCode" :placeholder="$t('d_qsryzm')" style="width:100%;border-radius: 6px;outline: none;box-shadow: none;outline: medium;"></b-form-input>
                    </b-input-group>
                    <div class="code-right" style="margin-top:0px">
                        <button @click="currenGetPhoneCode" variant="outline-secondary" :disabled="ifDisabled" style="" class="yanzhengma">{{btnText}}</button>
                    </div>
                </div>

                <div class="form-tab">
                    <button @click="verifycode" class="form-tab-btn" variant="success" style="cursor: pointer;font-family: PingFangSC-Medium;font-size: 17px;letter-spacing: 0;color: #ffffff;border: 1px solid #c3cde4;">{{$t('d_dl')}}</button>
                </div>
</div>
              </b-col>
          </b-row>
      </b-container>
  </div>
</div>
</template>

<script>
import mixins from "../../assets/js/mixin";
import { isEmail,isPhoneNum } from "../../assets/js/common";
import { mapActions } from "vuex";

export default {
  mixins: [mixins],
  props:["newlist"],//传的过来的是账号
  data() {
    return {
        phone:null,
        ifDisabled:false,
        btnText:this.$t('d_hqyzm'),
        timer:null,
        mgsCode:"",  // 用户输入验证码
        redirect:"",  // 回调地址
        typeall:1,  //账户类型1.手机2.邮箱
        loginType:null
    };
  },
  methods:{
      //判断账号是邮箱还是手机号
        getLoginTypell(val){  // 获取账号类型
        if (isEmail(val)) {
           this.typeall = 2
            return "email"
        } else if(isPhoneNum(val)){
            return "mobile"
            this.typeall = 1
        }
    },

      currenGetPhoneCode(){
        // this.getLoginTypell(this.newlist);
        this.loginType = this.getLoginTypell(this.newlist);
          if(this.typeall == 1){
            this.getPhoneCode(this.newlist).then(res=>{
            if (res.data.code == '001') {
                this.countdown();
            }
            });

          }else  if(this.typeall == 2){
            this.getemailCode(this.newlist).then(res=>{
            if (res.data.code == '001') {
                this.countdown();
            }
            });}
        
      },
      verifycode(){  // 校验验证码
        if (this.mgsCode == "") {
          // 请输入验证码
            this.$swal(this.$t('d_qsryzm'),{
					icon:'/static/img/tan_chuang.png'
				})
            return false;
        }
        this.ifLoadingChange(true);
        this.$http.post('/nb-web/api/user/verify/code',{
            account:this.newlist,
            mgsCode:this.mgsCode
        }).then(res=>{
            this.mgsCode = '';
            if (res.data.code == '001') { // 登入成功
                this.loginChange(true);
                if (this.redirect != '') {
                    // window.location.href = decodeURIComponent(this.redirect);
                    window.location.href = window.location.origin + '/user';
                } else {
                    // this.gotoRoute('/user')
                    window.location.href = window.location.origin + '/user';
                }
                
            }else{
                this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				});
            }
        })
      },
    ...mapActions(['loginChange','ifLoadingChange'])
  },
  created(){

       console.log(this.newlist)
      this.redirect = this.$route.query.redirect || "";
      console.log(this.redirect)
      this.phone = this.$cookie.getCookie('account');
      
      this.currenGetPhoneCode();
  },
  mounted(){
      document.onkeydown = (e)=>{
          if (e.keyCode === 13) {
              this.verifycode()
          }
      }
  },
  beforeDestroy(){
      document.onkeydown = null;
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";
.nav_bg {
    background: #0f214a!important;
}
.login-phone-code{
    // padding: 50px 0;
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    margin:auto;
    background: rgba(9,21,48,0.6);
    z-index: 30000
}
.l-wapper{
    .wapper{
     
    }
    .login-title{
        p{
            font-size: 24px;
            text-align: center;
            line-height: 46px;
            color: #2d6df0;
            cursor: pointer;
               
            
        }
    }
}
.wappere{
    font-size: 24px;
    text-align: center;
    line-height: 46px;
    color: #2d6df0;
    cursor: pointer;
    background:#fff;
    padding: 30px;
    height: 307px;
    border-radius: 10px;
}
.yanzhengma{
    cursor: pointer;
      width:100%; 
      padding: 1px 0 2px 0;
       font-size: 17px;
       letter-spacing: 0;
       color: #3B63BF;
       border: 1px solid #c3cde4;
       border-radius: 6px;
       background: transparent;
       }
</style>


